<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        @keyframes balloon {
            0%{right: -20%}
            10%{right: 20%;transform: rotate(35deg)}
            20%{right: 40%;transform: rotate(50deg)}
            30%{right: 60%;transform: rotate(75deg)}
            40%{right: 80%;transform: rotate(35deg)}
            50%{right: 100%;transform: rotate(0deg)}
            60%{right: 120%;transform: rotate(45deg)}
            70%{right: 100%;transform: rotate(75deg)}
            80%{right: 80%;transform: rotate(80deg)}
            90%{right: 60%;transform: rotate(45deg)}
            100%{right: -20%;transform: rotate(0deg)}
        }
        @keyframes bgcolor {
            0%{background-color: white}
            33%{background-color: darkgray}
            66%{background-color: black}
            100%{background-color: white}

        }
        #divall{
            height: 600px;
            position: relative;
            /*background: #B2B8CA;*/
            animation: bgcolor 12s linear infinite ;
        }
        .divfirst{
             height: 300px;
             width: 100%;
             background-image:url("image/cimages/groundFront.png");
             position:absolute;
             bottom: 0px;
             background-position: 250px;
             z-index: 999;
         }
        .divtwo{
            height: 299px;
            width: 100%;
            background-image:url("image/cimages/groundMid.png");
            position:absolute;
            bottom: 0px;
            background-position: -50px;
            z-index: 888;
        }
        .divthree{
            height: 280px;
            width: 100%;
            background-image:url("image/cimages/groundBack.png");
            position:absolute;
            bottom: 0px;
            background-position: -50px;
            z-index: 777;
        }
        .divfour{
            height: 147px;
            width: 100%;
            background-image:url("image/cimages/skyline.png");
            position:absolute;
            bottom: 160px;
            background-position: -50px;
            z-index: 666;
        }
        .divfive{
            height: 201px;
            width: 100%;
            background-image:url("image/cimages/beans.png");
            position:absolute;
            bottom: 180px;
            background-repeat: no-repeat;
            background-position: 600px;
            z-index: 555;
        }
        .divsix{
            height: 263px;
            width: 100%;
            background-image:url("image/cimages/Glockenspiel.png");
            position:absolute;
            bottom: 165px;
            background-repeat: no-repeat;
            background-position: 450px;
            z-index: 800;
        }
        .divseven{
            height: 229px;
            width: 100%;
            background-image:url("image/cimages/dowEventCenter.png");
            position:absolute;
            bottom: 120px;
            background-repeat: no-repeat;
            background-position: 1%;
            z-index: 850;
        }
        .diveight{
            height: 370px;
            width: 100%;
            background-image:url("image/cimages/friendshipShell.png");
            position:absolute;
            bottom: 120px;
            background-repeat: no-repeat;
            background-position: 16%;
            z-index: 900;
        }
        .divnine{
            height: 285px;
            width: 100%;
            background-image:url("image/cimages/Planetarium.png");
            position:absolute;
            bottom: 90px;
            background-repeat: no-repeat;
            background-position: 70%;
            z-index: 850;
        }
        .divten{
            height: 227px;
            width: 157px;
            background-image:url("image/cimages/balloon.png");
            background-repeat: no-repeat;
            position: absolute;
            right: -200px;
            z-index: 998;
            animation: balloon 10s linear infinite;
        }
    </style>
</head>
<body>
<div id="divall">

<div class="divfirst"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
    <div class="divfour"></div>
    <div class="divfive"></div>
    <div class="divsix"></div>
    <div class="divseven"></div>
    <div class="diveight"></div>
    <div class="divnine"></div>
    <div class="divten"></div>
</div>
</body>
</html>